<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
		<link href="Font-Awesome/css/font-awesome.min.css" rel="stylesheet" />
		<link href="style/main.css" rel="stylesheet" />
	</head>

	<body>
		<div id="wrapper">

			<div id="navbar">
				<div class="logo"></div>
				<ul class="navbox">
					<li data-src="index.html">数据列表</li>
					<li class="in" data-src="addBanner.html">添加banner</li>
					<li data-src="addCase.html">添加案例</li>
					<li data-src="addActivity.html">添加文章</li>
				</ul>
			</div>
			<div id="main">
				<div class="content">
					<div class="row">
						<div class="col-sm-12">
<!-- 							<div hidden="true">		
                       <form  id = "upload_banner_img"  enctype="multipart/form-data" method="post" action="/img/addBanner">
                          <input id ="upload_banner_img_file" type="file" name="file"/>         
                         <input type="submit" value="上传"/>
    </form>
	</div>	 -->
						
							<form class="form-horizontal">
								<div class="col-sm-12">
									<div class="col-sm-12 addtitle">添加banner</div>
								</div>
								<div class="col-sm-10">
									<div class="col-sm-6 codebox">
										<div class="form-group">
											<label for="name" class="col-sm-4 control-label left">选择模块</label>
											<div class="col-sm-6">
												<div class="select">
													<div class="select-text select-text1 big-select" id="code">一级模块</div>
													<input type="hidden" name="type" id="type" value="" />
													<span class="icon-sort-down"></span>
													<ul class="select-ul">
														<li>首页</li>
														<li>助力出品</li>
														<li>助力文化</li>
														<li>关于助力</li>
													</ul>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="col-sm-12">
									
									<div class="col-sm-10">
										<div class="form-group">
											<label for="name" class="col-sm-2 control-label left">外链</label>
											<div class="col-sm-8">
												<input type="text" class="form-control" id="linkUrl" name="linkUrl">
											</div>
										</div>
									</div>
									<div class="col-sm-10">
										<div class="form-group">
											<label for="name" class="col-sm-2 control-label left">添加图片</label>
											<div class="col-sm-7">
												<input type="text" class="form-control" id="imgsrc" maxlength="" placeholder="">
										    	<input type="hidden" name="imgUrl" id="imgUrl" >
											</div>
											<div class="col-sm-3">
												<input type="button" class="btn green-btn up-img" value="上传图片" />
											</div>
										</div>
									</div>
									<div class="col-sm-10">
										<div class="btns col-sm-10">
											<input type="text"  class="btn green-btn l-btn surebtn" value="添  加" />
										</div>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
			
	
			
			
		</div>
		<input type="file" id="file" style="display: none;" />
		<script  th:src="@{script/jquery-min.js}"></script>
		<script  th:src="@{script/ishoock.tools.js}"></script>
		<script  th:src="@{script/main.js}"></script>
		<script  th:src="@{bootstrap/js/bootstrap.min.js}"></script>
		<script th:src="@{bootstrap/js/bootstrap-paginator.js}"></script>
<!-- 			<script type="text/javascript"  th:src="@{script/ueditor.config.js}" ></script>
		<script type="text/javascript"  th:src="@{script/ueditor.all.min.js}" ></script>
		<script type="text/javascript"  th:src="@{script/lang/zh-cn/zh-cn.js}" ></script> -->
		<script>
		
		var is_update = false;
		var Id=location.getQuery("id");
		var tab_index=location.getQuery("tab_index");
	
		if(tab_index == 1){
			console.log(Id+'==>'+tab_index);
			
			$.get("/banner/abanner", {'id':Id},
					  function(data){
				 console.log(data);
	        	  var code =  parseInt(data.code);
	        	  var result = data.result;
	        	  if(code==1){
	        		  is_update = true;
	        		   $("#type").val(result.type);
	    			   $("#linkUrl").val(result.linkUrl);
	    			   $("#imgUrl").val(result.imgUrl);
	   				    $("#imgsrc").val(result.imgUrl);
		  			     if(result.type==1){
		 					$(".select-text1").text("首页");
		 				}else if(result.type==2){
		 					$(".select-text1").text("助力出品");
		 				}else if(result.type==3){
		 					$(".select-text1").text("助力文化");
		 				}else if(result.type==4){
		 					$(".select-text1").text("关于助力");
		 				}
	        		
	        	  }else{

	        	  }
					 
		 });
			
		}
	
			$(function() {
				//点击导航栏
				$("#navbar .navbox li").on("click",function(){
					window.location.href=$(this).attr("data-src");
				});
				//点击select
				$(".select").on("click", function(event) {
					$(this).children(".select-ul").slideToggle();
					event.stopPropagation();
				});
				//点击select下的li选项
				$(".select-ul>li").on("click", function(event) {
					
					/* alert($(this).text()); */
					/* 1 首页 2助力出品 3 助力文化 4 关于助力 */
					if($(this).text()=="首页")
					{
						$("#type").val('1');	
					}
					if($(this).text()=="助力出品")
					{
					$("#type").val('2');	
					}
					if($(this).text()=="助力文化")
					{
						$("#type").val('3');	
					}
					if($(this).text()=="关于助力")
					{
						$("#type").val('4');	
					}
					
					$(this).parents(".select").children(".select-text").text($(this).text());
					if($(this).text() == "是") {
						state = 0;
					} else if($(this).text() == "否") {
						state = 1;
					}
					$(this).parents(".select-ul").slideUp();
					event.stopPropagation();
				});

				//点击确定按钮
				$(".btns .surebtn").on("click", function() {
			/* 		window.location.href = "activeList.html"; */
			
			   
		/* 	   alert($("#type").val()+"=="+$("#linkUrl").val()+"=="+$("#imgUrl").val()); */
			  var  type =  $("#type").val();
			  var linkUrl = $("#linkUrl").val();
			  var imgUrl = $("#imgUrl").val();
			  
 			  if(type == ""){
				  alert("请选择模块")
				  return;
			  }
			  if(linkUrl == ""){
				  alert("请填写外链")
				  return;
			  }
			  if(imgUrl == ""){
				  alert("请添加图片")
				  return;
			  } 
			  
			  if(is_update){
				   $.post("/banner/update",{'id':Id,'type':type,'linkUrl':linkUrl,'imgUrl':imgUrl},
						   function(returndata){
					   console.log(returndata);
						     var code =  parseInt(returndata.code);
				        	  if(code==1){
				        		  alert("修改成功");
				         		  window.location.reload();
				        	  }else{
				        		  alert("修改失败");
				        	  }
						   });  
			  }else{
			  
			   $.post("/banner/add",{'type':type,'linkUrl':linkUrl,'imgUrl':imgUrl},
					   function(returndata){
				   console.log(returndata);
					     var code =  parseInt(returndata.code);
			        	  if(code==1){
			        		  alert("添加成功");
			         		  window.location.reload();
			        	  }else{
			        		  alert("添加失败");
			        	  }
					   });
			  }
	/* 		    $.ajax({  
			          url: '/banner/add' ,  
			          type: 'POST',  
			          data: {'type':$("#type").val(),'linkUrl':$("#linkUrl").val(),'imgUrl':$("#imgUrl").val()},  
			          async: false,  
			          cache: false,  
			          processData: false,  
			          contentType: "text/plain;charset=UTF-8",
			          type: 'post',
			          dataType: "json",
			          success: function (returndata) {  
			        	  console.log(returndata);
			        	  var code =  parseInt(returndata.code);
			        	  if(code==1){
			        		  alert("添加成功");
			        		
			        	  }else{
			        		  alert("添加失败");
			        	  }
			          },  
			          error: function (returndata) {  
			              alert(returndata);  
			          }  
			     });  */
			
			
			
				});

				//上传图片
				$(".up-img").on('click', function() {
					$("#file").trigger('click');
					$img = $(this);
				});

				var eleFile = document.querySelector('#file');

				// 压缩图片需要的一些元素和对象
				var reader = new FileReader(),
					img = new Image();

				// 选择的文件对象
				var file = null;

				// 缩放图片需要的canvas
				var canvas = document.createElement('canvas');
				var context = canvas.getContext('2d');

				// base64地址图片加载完毕后
				img.onload = function() {
					// 图片原始尺寸
					var originWidth = this.width;
					var originHeight = this.height;
					// 最大尺寸限制
					var maxWidth = 400,
						maxHeight = 400;
					// 目标尺寸
					var targetWidth = originWidth,
						targetHeight = originHeight;
					// 图片尺寸超过400x400的限制
					if(originWidth > maxWidth || originHeight > maxHeight) {
						if(originWidth / originHeight > maxWidth / maxHeight) {
							// 更宽，按照宽度限定尺寸
							targetWidth = maxWidth;
							targetHeight = Math.round(maxWidth * (originHeight / originWidth));
						} else {
							targetHeight = maxHeight;
							targetWidth = Math.round(maxHeight * (originWidth / originHeight));
						}
					}

					// canvas对图片进行缩放
					canvas.width = targetWidth;
					canvas.height = targetHeight;
					// 清除画布
					context.clearRect(0, 0, targetWidth, targetHeight);
					// 图片压缩
					context.drawImage(img, 0, 0, targetWidth, targetHeight);
			
				};

				// 文件base64化，以便获知图片原始尺寸
				reader.onload = function(e) {
					img.src = e.target.result;
				};
				eleFile.addEventListener('change', function(event) {
			
					file = event.target.files[0];
	
		        var formData = new FormData();
		        formData.append('file',file);    //将文件转成二进制形式
		       $.ajax({  
		          url: '/img/addBanner' ,  /*这是处理文件上传的servlet*/
		          type: 'POST',  
		          data:formData,  
		          async: false,  
		          cache: false,  
		          processData: false,  
		          contentType: false,
		          success: function (returndata) {  
		        	  console.log(returndata);
		        	  var code =  parseInt(returndata.code);
		        	  if(code==1){
		     /*    		  alert("上传成功"); */
		        		  $("#imgUrl").val(returndata.result);
		        	  }else{
		        		  alert("上传失败");
		        	  }
		          },  
		          error: function (returndata) {  
		              alert(returndata);  
		          }  
		     });  

					$("#imgsrc").val(this.value);
					// 选择的文件是图片
					if(file.type.indexOf("image") == 0) {
						reader.readAsDataURL(file);
					}
				});

			});
		</script>
	</body>

</html>